<template>
  <div style="margin-left: 20%">
    <div>格网:{{ aimGridNum }}</div>
    <div>
      <div>范围:</div>
      <div>{{ grid.left }}-{{ grid.right }}</div>
      <div>{{ grid.top }}-{{ grid.bottom }}</div>
    </div>
    <div>
      <span>目标经度:<input type="number" v-model="aimPoix" /></span>
      <span>目标纬度:<input type="number" v-model="aimPoiy" /></span>
    </div>
    <div>
      <div style=" cursor:pointer;" @click="calculate">计算</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 网格范围
      grid: {
        left: 105.2,
        right: 110.3,
        top: 28.11,
        bottom: 32.29,
      },
      gridWidth: 0.01,
      aimPoix: 108.4423,
      aimPoiy: 30.6741,
      aimGridNum: 0,
    };
  },
  methods: {
    // 格网计算
    calculate() {
      
      this.aimPoix = Math.floor(this.aimPoix * 100) / 100;
      this.aimPoiy = Math.floor(this.aimPoiy * 100) / 100;
      // 行 长度
      let rownum = (this.grid.right - this.grid.left) * 100;
      // 列 长度
      let colnum = (this.grid.top - this.grid.bottom) * 100;
      // 目标点 到 最左侧长度
      let leftlen = (this.aimPoix - this.grid.left).toFixed(2) * 100;
      // 目标点 到 最上侧长度
      let toplen = (this.aimPoiy - this.grid.top).toFixed(2) * 100;
      
      let gridcol = toplen * rownum;
      let result = Math.round(gridcol + leftlen);
      //  let result = gridcol + leftlen
      this.aimGridNum = result + 1;
    },
  },
  mounted() {},
};
</script>

<style>
</style>